<template>
	<view>

		<view class="u-page">

			<view id="videos">
				<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/19.png"
					mode="">
				</image>
				<view class="bgblur"></view>
				<view class="banner">
					<u-sticky bgColor="none">
						<view :class="[hasbg?'bgs1':'']">
							<view @click="searchList" class="search">
								<view style="margin-right: 46px; width: 100%;">
									<u-input :clearable="true" style="width: 100%; color: #fff;" placeholder="请输入需要搜索的视频" v-model="keyword"
										type="text" />
								</view>
								<!-- <text>搜索你想要的好玩，这儿都有～</text> -->
								<div class="icon">
									<image class="imgs"
										src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/8.png"
										mode="">
									</image>
								</div>
							</view>
						</view>
					</u-sticky>
				</view>
				<!-- tab -->
				<u-sticky offset-top="92" bgColor="none">
					<view style="margin: 0 10% 15px;" :class="[hasbg?'bgs1':'']">
						<u-tabs :is-scroll="false" height="60" class="tabs" bg-color="none" font-size="28"
							active-color="#fff" :bar-style="barSty" :active-item-style="ActiveStyle"
							inactive-color="#fff" :list="VideocategoryList" :current="Videocurrent" @change="change">
						</u-tabs>
					</view>
				</u-sticky>
				<view v-if="list1.length" class="">
					<videos :list1="list1" />
					<uni-load-more :status="status"></uni-load-more>
				</view>
				<view v-else class="empty">
					<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
						text="暂无数据" mode="list"></u-empty>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import videos from "./video.vue"
	export default {
		components: {
			videos,
		},

		onPageScroll(e) { //uniapp自带的监听滚动条方法
			console.log(e);
			this.scrollVal = e.scrollTop
			if (this.current == 0) {
				if (e.scrollTop >= 100) {
					this.hasbg = true
				} else {
					this.hasbg = false
				}
			}

		},
		data() {
			return {
				id: "",
				keyword: "",
				Videocurrent: 0,
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				VideocategoryList: [{
					name: '视频定制'
				}, {
					name: '图文定制'
				}],

				hasbg: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				categoryList: [],
				sortId: "",
				types: 'recommend',
				scrollVal: 0,
				list: [],

				// video：视频定制
				// image：图文
				// avatar：头像
				current: 0
			}
		},
		onLoad(e) {
			// 获取分类列表
			this.getlist();
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			// 视频搜索
			searchList() {
				this.formData.page = 1
				this.list1 = []
				this.getlist()
			},
			// 视频tab切换
			change(index) {
				this.Videocurrent = index;
				this.formData.page = 1
				this.sortId = this.VideocategoryList[this.Videocurrent]?.id
				this.types = this.VideocategoryList[this.Videocurrent]?.types
				this.list1 = []
				this.getlist()
			},

			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.video.getVideoList({
						sortId: 1,
						page: this.formData.page,
						size: this.formData.pageSize,
						types: this.types,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},



		},
	}
</script>
<style scoped lang="scss">
	#videos {
		/deep/ .u-input__input {
			color: #fff !important;
		}

		.bgs {
			width: 100%;
			height: 283rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			z-index: -1;
		}

		.banner {

			padding-top: 86rpx;

			.search {
				position: relative;


				padding-left: 48rpx;
				font-size: 28rpx;
				font-family: PingFang SC,
					PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				margin: 0 auto 30rpx;
				width: 702rpx;
				height: 92rpx;
				background: rgba(255, 255, 255, 0.06);
				border-radius: 53rpx;
				opacity: 1;

				.icon {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 3;
					width: 92rpx;
					height: 92rpx;
					background: #8CC950;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.imgs {
						width: 51rpx;
						height: 51rpx;
					}
				}
			}
		}

		.bgs1 {
			overflow: hidden;
			width: 100%;
			background: rgba(19, 20, 32, 1);
			z-index: 8;
		}

		.bgblur {
			backdrop-filter: blur(8px);
			width: 330rpx;
			height: 92rpx;
			position: absolute;
			right: 50rpx;
			top: 86rpx;
			border-radius: 53rpx;
		}

	}

	.u-page {
		padding-bottom: 180rpx;
	}



	page {

		background: #131420;
	}
</style>
